<div class="main">
  <div class="header">
    <div class="search">
      <input [appFocus]="focusEvent"
             (keyup)="search($event.target.value)"
             placeholder="搜索">
    </div>
  </div>
  <div class="content">
    <div *ngIf="isPure" class="tip">
      <p>
        Gooooo! <i>🔍</i>
        <br />
        您想查什么内容可在待办事项和备注内查找
      </p>
    </div>
    <div *ngIf="!isPure">
      <div *ngIf="resFromTitle.length === 0 && resFromNotes.length === 0" class="tip">
        <p>
          Ooops! <i>😫</i>
          <br/>
          没有找到匹配的待办事项！
        </p>
      </div>
      <div *ngIf="resFromTitle.length > 0">
        <h3>来自标题</h3>
        <ul class="todos">
          <li *ngFor="let task of resFromTitle">
            <div class="todo">
              <i [ngClass]="{'check': !task.isDone, 'checked': task.isDone}" [ngStyle]="{'vertical-align': task.today || task.deadline || task.notes ? '': 'middle'}"
                (click)="toggleDone(task, $event)">
              </i>
              <div class="todo-wrapper">
                <span class="todo-text" [ngClass]="{'todo-text-done': task.isDone}">
                  {{task.todo}}
                </span>
                <div class="todo-notes" *ngIf="task.today || task.deadline || task.notes">
                  <span *ngIf="task.today" [ngClass]="{'today': !task.isDone}">
                    ☀️ 我的一天
                    <i class="dot" *ngIf="task.deadline || task.notes">•</i>
                  </span>
                  <span *ngIf="task.deadline" [ngStyle]="{'color': renderDeadlineStyle(task.deadline, task.isDone)}">
                    📅 {{task.deadline | renderDeadline}}
                    <i class="dot" *ngIf="task.notes">•</i>
                  </span>
                  <span *ngIf="task.notes">📝 备注</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div *ngIf="resFromNotes.length > 0">
        <h3>来自备注</h3>
        <ul class="todos">
          <li *ngFor="let task of resFromNotes">
            <div class="todo">
              <i [ngClass]="{'check': !task.isDone, 'checked': task.isDone}" [ngStyle]="{'vertical-align': task.today || task.deadline || task.notes ? '': 'middle'}"
                (click)="toggleDone(task, $event)">
              </i>
              <div class="todo-wrapper">
                <span class="todo-text" [ngClass]="{'todo-text-done': task.isDone}">
                  {{task.todo}}
                </span>
                <div class="todo-notes" *ngIf="task.today || task.deadline || task.notes">
                  <span *ngIf="task.today" [ngClass]="{'today': !task.isDone}">
                    ☀️ 我的一天
                    <i class="dot" *ngIf="task.deadline || task.notes">•</i>
                  </span>
                  <span *ngIf="task.deadline" [ngStyle]="{'color': renderDeadlineStyle(task.deadline, task.isDone)}">
                    📅 {{task.deadline | renderDeadline}}
                    <i class="dot" *ngIf="task.notes">•</i>
                  </span>
                  <span *ngIf="task.notes">📝 备注</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
